<template>
  <section v-if="roles == '1'">
    <error />
  </section>
  <section v-else>
    <div>
      <div class="app-container">
        <div>
          <el-form :inline="true">
            <el-form-item style="float: left" label="查询入侵记录:">
              <el-input placeholder="请输入人名,例：['shi']..." auto-complete="off" v-model="searchKeyword"></el-input>
            </el-form-item>
            <el-form-item style="float: center">
              <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>



        <div class="dateSelect">
          <span>日期</span>
          <el-date-picker style="margin-left: 20px;" v-model="selectedDate" type="date" placeholder="选择日期"
            @change="filterByDate" @clear="resetFilter">
          </el-date-picker>
        </div>

        <el-table v-loading="listLoading"
          :data="(selectedDate || searchKeyword) ? ((selectedDate && searchKeyword) ? mergedTableData : (searchKeyword ? filteredTableData1 : filteredTableData2)) : tableData"
          element-loading-text="Loading" border fit highlight-current-row style="margin-top: 3%;">
          <el-table-column label="序号" show-overflow-tooltip width="80">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="入侵日期">
            <template slot-scope="scope">
              {{ formatDate(scope.row.ctime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="入侵时间">
            <template slot-scope="scope">
              {{ formatTime(scope.row.ctime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="入侵人数" width="80">
            <template slot-scope="scope">
              {{ scope.row.people_num }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="熟人人数" width="80">
            <template slot-scope="scope">
              {{ scope.row.recog_num }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="熟人列表" width="200">
            <template slot-scope="scope">
              {{ scope.row.person_list }}
            </template>
          </el-table-column>
          <el-table-column label="采集图像" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.image_url }}</span>
            </template>
          </el-table-column>
          <el-table-column label="视频回放" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.video_url }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="scope">
              <span><el-button size="mini" type="danger" icon="el-icon-delete"
                  @click="deleteLog(scope.$index)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>


        <!-- <div class="block" style="float: right">
        <el-pagination :current-page="this.page" :page-sizes="[10, 50, 100, 200]" :page-size="this.offset"
          layout="total, sizes, prev, pager, next, jumper" :total="this.totalNum" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div> -->
      </div>
    </div>
  </section>
</template>

<script>
import { showOperateLog } from '@/api/operate-log'
import { deleteInfo } from '@/api/form'
import error from "../../error/401.vue"
import { mapGetters } from 'vuex'

export default {
  name: 'OperateLogVue',
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {

    error
  },
  data() {
    return {
      listLoading: false,
      selectedDate: null,
      page: 1,
      offset: 10,
      totalNum: 1000,
      searchKeyword: null,
      filteredTableData1: [],
      filteredTableData2: [],
      tableData: [
        {
          //ctime: "2023年07月13日 22时11分08秒",
          ctime: "2023-07-13T22:11:08",
          video_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/vid_1689305118_4668806",
          image_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/photo_1689305118_4668806",
          people_num: 1,
          person_list: "['shi']",
          recog_num: 1

        },
        {
          //ctime: "2023年07月15日 23时28分08秒",
          ctime: "2023-07-15T23:28:08",
          video_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/vid_1689305118_4668806",
          image_url: "https://kon.obs.cn-north-4.myhuaweicloud.com/photo_1689305118_4668806",
          people_num: 2,
          person_list: "['niu']",
          recog_num: 1

        }
      ],
      input: ''
    }
  },
  created() {
    this.fetchData()
    this.filter()
  },
  computed: {
    ...mapGetters([

      'roles'
    ]),
    mergedTableData() {
      return this.filteredTableData1.filter(item => {
        return this.filteredTableData2.some(obj => obj === item);
      });
    }
  },

  methods: {
    // filter () {
    //   const params = {
    //     page: this.page,
    //     offset: this.offset,
    //     content: this.input
    //   }
    // },

    fetchData() {
      //this.listLoading = true
      this.listLoading = false
      showOperateLog({}).then(response => {
        this.tableData = Array.from(response.data.data)
        // console.log("Data" + this.list)
        this.listLoading = false
      })
    },
    search() {
      //this.listLoading = true
      this.listLoading = false
      if (this.searchKeyword == null) {
        //this.fetchData()
        // this.filteredTableData = this.tableData;
        return
      }
      const filteredData = this.tableData.filter(item => item.person_list === this.searchKeyword);
      this.filteredTableData1 = filteredData;
    },
    // search() {
    //   //this.listLoading = true
    //   this.listLoading = false
    //   if (this.searchKeyword == "") {
    //     this.fetchData()
    //     return
    //   }
    //   getList(this.searchKeyword).then(response => {
    //     this.tableData = Array.from(response.data.data)
    //     this.listLoading = false
    //   })
    // },

    // 两个方法分别用于获取日期和时间
    formatDate(datetime) {
      const dateObj = new Date(datetime);
      const formattedDate = dateObj.toLocaleDateString(); // 提取日期部分
      return formattedDate;
    },
    formatTime(datetime) {
      const dateObj = new Date(datetime);
      const formattedTime = dateObj.toLocaleTimeString(); // 提取时分秒部分
      return formattedTime;
    },
    filterByDate() {
      if (this.selectedDate) {
        console.log(this.selectedDate)
        const filteredData = this.tableData.filter(item => {
          // 使用选定的日期进行筛选，假设记录的日期保存在 ctime 字段中
          const recordDate = this.formatDate(item.ctime);
          const selectedDate = this.formatDate(this.selectedDate);
          return recordDate === selectedDate;
        });
        this.filteredTableData2 = filteredData; // 更新筛选后的数据

      }
      // else {
      //   this.filteredTableData = this.tableData; // 没有选择日期时显示全部数据
      // }
    },
    resetFilter() {
      this.selectedDate = null; // 清空选择的日期
      this.filteredTableData2 = []; // 清空筛选后的数据，显示全部数据
    },

    //删除记录
    deleteLog(index) {
      if (this.selectedDate || this.searchKeyword) {
        if (this.selectedDate && this.searchKeyword) {
          deleteInfo({
            "ctime": this.mergedTableData[index].ctime
          })
            .then(() => {
              // 处理成功的响应
              this.$message('记录删除成功！');
              this.mergedTableData.splice(index, 1);
            })
            .catch(() => {
              this.$message.error('记录删除失败！');
              console.log(error);
            })
        } else {
          if (this.searchKeyword) {
            deleteInfo({
              "ctime": this.filteredTableData1[index].ctime
            })
              .then(() => {
                // 处理成功的响应
                this.$message('记录删除成功！');
                this.filteredTableData1.splice(index, 1);
              })
              .catch(() => {
                this.$message.error('记录删除失败！');
                console.log(error);
              })
          } else {
            deleteInfo({
              "ctime": this.filteredTableData2[index].ctime
            })
              .then(() => {
                // 处理成功的响应
                this.$message('记录删除成功！');
                this.filteredTableData2.splice(index, 1);
              })
              .catch(() => {
                this.$message.error('记录删除失败！');
                console.log(error);
              })
          }
        }
        // deleteInfo({
        //   "ctime": this.tableData[index].ctime
        // })
        //   .then(() => {
        //     // 处理成功的响应
        //     this.$message('记录删除成功！');
        //     this.tableData.splice(index, 1);
        //   })
        //   .catch(() => {
        //     this.$message.error('记录删除失败！');
        //     console.log(error);
        //   })
      } else {
        deleteInfo({
          "ctime": this.tableData[index].ctime
        })
          .then(() => {
            // 处理成功的响应
            this.$message('记录删除成功！');
            this.tableData.splice(index, 1);
          })
          .catch(() => {
            this.$message.error('记录删除失败！');
            console.log(error);
          })
      }
    },
  }
}
</script>

<style scoped>
.input-content {
  width: 500px;
}

.search-button {
  margin-left: 100px;
}

.dateSelect {
  margin-top: 20px;
}
</style>
